import React, { useEffect, useState } from 'react';
import { Card, Result, Button, Typography, Spin } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import '../styles/PaymentSuccess.css'; // Assuming you'll create this CSS file

const { Title, Text } = Typography;

const PaymentSuccess = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [orderNumber, setOrderNumber] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (location.state && location.state.orderNumber) {
            setOrderNumber(location.state.orderNumber);
        }
        setLoading(false);
    }, [location.state]);

    if (loading) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
                <Spin size="large" tip="加载中..." />
            </div>
        );
    }

    return (
        <div className="payment-success-container">
            <Card className="payment-success-card">
                <Result
                    status="success"
                    icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
                    title={<Title level={3}>支付成功！</Title>}
                    subTitle={
                        <>
                            <Text>您的订单已成功支付。</Text>
                            {orderNumber && <Text>订单号: <strong>{orderNumber}</strong></Text>}
                            <Text>感谢您的购买！</Text>
                        </>
                    }
                    extra={[
                        <Button type="primary" key="viewOrders" onClick={() => navigate('/orders')}>
                            查看我的订单
                        </Button>,
                        <Button key="backHome" onClick={() => navigate('/')}>
                            返回首页
                        </Button>,
                    ]}
                />
            </Card>
        </div>
    );
};

export default PaymentSuccess; 